<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">入库类型：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="inventoryType">
                                            <option value="">按入库类型</option>
                                            <option value="production">生产入库</option>
                                            <option value="purchase">采购入库</option>
                                            <option value="allot">调拨入库</option>
                                            <option value="check">盘点入库</option>
                                            <option value="barter">换货入库</option>
                                            <option value="breakage">破损入库</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">计划编号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="batchCode" class="layui-input" type="text" placeholder="请输入库计划单编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">编号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="code" class="layui-input" type="text" placeholder="请输入包装编码"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit>查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="productPackLabelBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
                        </div>
                        <div class="lay-btn-rt">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="productPackLabelTable" lay-filter="productPackLabelTable"></table>
        </div>
    </div>
</div>

<style>
    .width100 {
        width: 100px;
    }
</style>
<!-- 表格操作列 -->
<script type="text/html" id="productPackLabelTableBar">
    {{#
        var isPrintBarCode;
        if(d.printCount > 0){
            isPrintBarCode = 'layui-btn-gray'
        } else {
            isPrintBarCode = 'layui-btn-danger'
        }
    }}
    <a class="layui-btn {{isPrintBarCode}} layui-btn-xs" lay-event="printBarcode">打印条码</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="productPackLabelForm">
    <form lay-filter="productPackLabelForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label width100">
                入库类型
            </label>
            <div class="layui-input-inline">
                <select name="inoutTypeCode" lay-filter="inoutTypeCode" id="inoutTypeCode"></select>
            </div>
        </div>

        <!-- 入库类型名称-->
        <input type="hidden" name="inoutTypeName" id="inoutTypeName">

        <div class="layui-form-item">
            <label class="layui-form-label width100">生产计划工单</label>
            <div class="layui-input-inline">
                <input type="text" value="" name="workOrderCode" required="" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">
                选择物料
            </label>
            <div class="layui-input-inline">
                <select lay-verify="required" lay-filter="productId" id="productId" name="skuCode">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">
                <span style="color: red">*</span> 生产负责人
            </label>
            <div class="layui-input-inline">
                <input type="text" name="productionManager" class="layui-input" required lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">
                <span style="color: red">*</span> 入库单位
            </label>
            <div class="layui-input-inline">
                <select name="productUnitId" lay-verify="required" id="productUnitId" lay-filter="productUnitId">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">
                <span style="color: red">*</span> 入库包装方案
            </label>
            <div class="layui-input-inline">
                <select name="packId" lay-verify="required" lay-filter="packId">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">批次编码</label>
            <div class="layui-input-inline">
                <input type="text" id="batchEncoding" name="batchEncoding" required=""
                       lay-verify="batchEncoding" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">批次码</label>
            <div class="layui-input-inline">
                <input type="text" id="batchCode" name="batchCode" lay-verify="batchCode" class="layui-input"
                       disabled style="color: red; border:none;">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">添加包装SN数</label>
            <div class="layui-input-inline">
                <input type="text" name="addCount" required="" lay-verify="" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">
                <span style="color: red">*</span> 入库送料人
            </label>
            <div class="layui-input-inline">
                <input type="text" name="feeder" class="layui-input" required lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">
                <span style="color: red">*</span> 入库仓库
            </label>
            <div class="layui-input-inline">
                <select name="warehouseId" lay-verify="required" lay-filter="warehouseId" id="warehouseId">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label width100">入库备注说明</label>
            <div class="layui-input-inline">
                <input type="text" value="" name="remark" required="" lay-verify="shu" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="productPackLabelFormSubmit" lay-submit type="button">保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;

        // 渲染表格
        var insTb = table.render({
            elem: '#productPackLabelTable',
            url: config.base + 'enterprise/product/admin/productPackLabel/list',
            page: true,
            cellMinWidth: 100,
            id: 'productPackLabelTableId',
            cols: [[
                {type: 'checkbox'}
                // , {field: 'id', title: '序号'}
                ,{type: 'numbers', title: '序号'}
                , {field: 'code', title: '包装编码', width: 220}
                , {field: 'skuCode', title: '物料编号', width: 140}
                , {field: 'batchCode', title: '批次码', width: 150}
                , {field: 'productName', title: '物料名称', width: 120}
                , {field: 'packCode', title: '物料包装规格', width: 150}
                , {field: 'packSpecification', title: '包装规格', width: 100}
                , {field: 'baseRate', title: '单位包装数'}
                , {field: 'unitName', title: '基础单位'}
                , {field: 'quantity', title: '装入数量'}
                , {field: 'surplusQuantity', title: '剩余数量'}
                , {field: 'statusDesc', title: '状态'}
                , {field: 'printCount', title: '打印次数'}
                , {field: 'createTime', title: '创建时间', width: 170}
                , {field: 'creatorName', title: '创建人', width: 120}
                , {align: 'center', toolbar: '#productPackLabelTableBar', title: '操作', width: 200, fixed: 'right'}
            ]],
            done: function (res, curr, count) {
                //移除按钮
                // var menuButton = config.getMenuButton(location.hash);
                // if (menuButton.indexOf("搜索") == -1) {
                //     $('.layui-form.toolbar').remove();
                // }
                // if (menuButton.indexOf("修改") == -1) {
                //     $("[lay-event='edit']").remove();
                // }
                // if (menuButton.indexOf("删除") == -1) {
                //     $("[lay-event='del']").remove();
                // }
            }
        });
        form.render('select');
        // 工具条点击事件
        table.on('tool(productPackLabelTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            } else if (obj.event === 'printBarcode') { //打印条码
                getPrintBarcode(data)
            }
        });

        // 请求条码接口
        function getPrintBarcode(data) {
            layer.load(2);
            admin.req('enterprise/product/admin/productPackLabel/getBarCode', {code: data.code}, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    var newstr = `
                        <div style="padding: 20px;width: 100%;box-sizing: border-box;">
                            <div style="height: 150px;width: 100%">
                                <div style="width: 150px;float: left;height: 100%;">
                                    <img src="${res.data}" style="max-width: 100%; width: 100%;height: 100%;"/>
                                </div>
                                <div style="width: calc(100% - 150px); float: left;height: 100%; box-sizing: border-box; padding: 15px; font-size: 16px">
                                    ${data.productName}
                                </div>
                            </div>
                            <p style="margin-top: 5px;font-size: 16px;width: 100%;box-sizing: border-box;height: 20px; overflow: hidden"> ${data.code}</p>
                        </div>
                    `;
                    printBarcode(newstr)
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'GET');
        }

        // 打印条码
        function printBarcode(data) {
            admin.open({
                type: 1,
                area: ['330px', '350px'],
                offset: '65px',
                title: "打印预览",
                content: data,
                btn: ['打印', '取消'],
                yes: function () {
                    let newWin = window.open("");//新打开一个空窗口
                    newWin.document.write(data);//将表格添加进新的窗口
                    newWin.document.close();//在IE浏览器中使用必须添加这一句
                    newWin.focus();//在IE浏览器中使用必须添加这一句
                    newWin.print();//打印
                    newWin.close();//关闭窗口
                },
                btn2: function () {
                    layer.closeAll();
                }

            })

        }

        //监听排序
        table.on('sort(productPackLabelTable)', function (obj) {
            table.reload('productPackLabelTable', {initSort: obj, where: {sort: obj.field, order: obj.type}});
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}}, 'data');
            return false;
        });

        // 添加按钮点击事件
        $('#productPackLabelBtnAdd').click(function () {
            showEditModel();
        });


        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: '460px',
                offset: '65px',
                title: '添加物料包装条码',
                content: $('#productPackLabelForm').html(),
                success: function () {
                    form.val('productPackLabelForm', data);
                    // 表单提交事件
                    form.on('submit(productPackLabelFormSubmit)', function (d) {
                        layer.load(2);
                        admin.req('enterprise/product/admin/productPackLabel/add',JSON.stringify(d.field), function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload('productPackLabelTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'POST',true, 'application/json; charset=utf-8');
                        return false;
                    });

                    admin.req('enterprise/product/admin/productUnit/getAll', {}, function (res) {
                        if (res.code == 200) {
                            loadSelectHtml(res.data, "入库单位", "productUnitId");
                        }
                    }, 'GET', false);

                    //查询入库类型
                    admin.req('enterprisecab/warehouse/admin/warehouseInventoryType/list', {inventoryType: 'in',limit:9999,status:'enable'}, function (res) {
                        if (res.code == 200) {
                            loadSelectHtml(res.data, "选择入库类型", "inoutTypeCode", 6);
                        }
                    }, 'GET');

                    form.on('select(inoutTypeCode)', data => {
                        $('#inoutTypeName').val($("#inoutTypeCode option:checked").attr("valuename"));
                    });

                    form.on("select(productUnitId)", function (data) {
                        admin.req('enterprise/product/admin/productPack/getByUnitId', {productUnitId: data.value}, function (res) {
                            if (res.code == 200) {
                                loadSelectHtml(res.data, "入库包装方案", "packId");
                            }
                        }, 'GET', false)
                    })


                    admin.req('enterprisecab/warehouse/admin/warehouse/list', {}, function (res) {
                        if (res.code == 200) {
                            loadSelectHtml(res.data, "入库仓库", "warehouseId");
                        }
                    }, 'GET', false)

                    // name的值原本是 productId 后改为 skuCode
                    admin.req('enterprise/product/admin/productDetail/getAll', {}, function (res) {
                        if (res.code == 200) {
                            loadSelectHtml(res.data, "选择物料", "skuCode", 4);
                        }
                    }, 'GET', false)

                    let batchCodeOne = '', batchCodeTwo = '';

                    form.on("select(productId)", function (data) {
                        batchCodeOne = data.value
                        $('#batchCode').val(batchCodeOne + "-" + batchCodeTwo)
                    })
                    $('#batchEncoding').blur(function () {
                        batchCodeTwo = $(this).val();
                        $('#batchCode').val(batchCodeOne + "-" + batchCodeTwo)
                    })

                    function loadSelectHtml(data, tips, htmltarget, type) {
                        let html = ' <option value>' + tips + '</option>';
                        if (!data || data == null) {
                            return;
                        }
                        for (let i = 0; i < data.length; i++) {
                            if (type == 1) {
                                html += `<option value='${data[i].id}'>${data[i].companyName}</option>`;
                            } else if (type == 2) {
                                html += `<option value='${data[i].skuCode}'>${data[i].skuCode}</option>`;
                            } else if (type == 3) {
                                html += `<option value='${data[i].id}'>${data[i].warehouseName}</option>`;
                            } else if (type == 4) {
                                html += `<option value='${data[i].skuCode}'  skuCode='${data[i].skuCode}'>${data[i].skuName}</option>`;
                            } else if (type == 6) {
                                html += `<option value='${data[i].code}' valuename = '${data[i].name}'>${data[i].name}</option>`;
                            } else {
                                html += `<option value='${data[i].id}'>${data[i].name}</option>`;
                            }
                        }
                        $("form select[name='" + htmltarget + "']").html(html);
                        form.render('select');
                    }


                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('product/product/admin/productPackLabel/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        // 导出excel
        $('#productPackLabelBtnExport').click(function () {
            var checkRows = table.checkStatus('productPackLabelTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });

    });
</script>